<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:replace="common/base::static"/>
    <link rel="stylesheet" th:href="@{/static/css/element.ui.2.13.2.index.css}">
    <style type="text/css">
        [v-cloak]{display: none}
    </style>
</head>


<div id="trade_info" v-cloak>
    <input type="hidden" id="infoId" th:value="${id}" />
        <el-collapse v-model="activeNames"   >
            <el-collapse-item  v-for="(item,index) in processList" :key="index" @click.native="queryTradeProcessData(item)" :disabled="item.status == '0'?true:false">
                <template slot="title">
                    {{item.updateDate}}
                    &nbsp;<i v-if="item.status == '0'" class="el-icon-circle-close" style="font-size: 20px;"></i>
                    <i v-if="item.status == '1'" class="el-icon-success" style="color: #00B83F;font-size: 20px;"></i>
                    <i v-if="item.status == '2'" class="el-icon-circle-plus" style="color: #00B83F;font-size: 20px;"></i>  {{item.name}}
                </template>
                <el-timeline style="margin-left: 133px;">
                    <el-timeline-item
                            v-for="(processDataList,index) in item.processDataList"
                            color="#0bbd87"
                            :key="index"
                            size="large"
                    >
                        {{processDataList.name}}
                        <div>
                            <span><i class="el-icon-time"></i> {{processDataList.createDate}}</span></br>
                            <el-link type="primary" @click="queryTradeDetail(item.id,processDataList.stepNum)">详情数据</el-link>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </el-collapse-item>
        </el-collapse>

        <el-dialog
                width="60%"
                title="详情数据"
                :visible.sync="innerVisible"
                 >
            <vue-form
                    v-model="formData"
                    :ui-schema="uiSchema"
                    :schema="schema"
                    :form-props="formProps"
            >
            </vue-form>
        </el-dialog>
</div>
<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/js/schema/vue.2.6.12.js}"></script>
<script th:src="@{/static/js/schema/element.ui.index.2.13.2.js}"></script>
<script th:src="@{/static/js/schema/axios.0.18.0.min.js}"></script>
<script th:src="@{/static/js/schema/polyfill.umd.min.0.0.1.js}"></script>
<script th:src="@{/static/js/schema/vueJsonSchemaForm.umd.1.2.0.min.js}"></script>
<script th:src="@{/static/js/schema/vue_component.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var vm = new Vue({
        el: '#trade_info',
        data(){
            return{
                dialogVisible:false,	// 交易数据
                innerVisible:false,		// 详情数据
                activeNames: [],
                processList:[], // 流程集合
                formData:{},
                uiSchema:{},
                schema:{},
                formProps:{},
                formFooter:{}
            }
        },
        mounted() {
            this.queryTradeInfo();
        },
        methods: {

            //获取阶段数据
            queryTradeInfo(){
                var vue = this;
                let id = document.getElementById("infoId").value;
                var p = axios.get(api.trade.tradeInfo,{params:{id:id}});
                p.then(function (result) {
                    if(result.data.processList.length>0){
                        vue.processList = result.data.processList;
                    }else{
                        wlbKit.warningMsg("无数据！");
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },

            // 根据阶段id 获取流程概要数据
            queryTradeProcessData(item){
                var vue = this;
                console.log(item)
                if(!item.processDataList){
                    var p = axios.get(api.trade.tradeInfoData,{params:{processId:item.id}})
                    p.then(function (result) {
                        item.processDataList = result.data.processDataList;
                    }).catch(function (error) {
                        console.log(error);
                    })
                }
            },

            // 详情数据查看
            queryTradeDetail(processId,stepNum){
                var vue = this;
                vue.formData = {};
                let obj = {
                    processId : processId,
                    stepNum:stepNum
                };
                var p = axios.get(api.trade.tradeInfoDataDetail,{params:obj});
                p.then(function (result) {
                    vue.formData = JSON.parse(result.data.data);
                    let templateData = JSON.parse(result.data.templateData);
                    vue.schema = templateData.schema;
                    if(result.data.uiSchema !=null){
                        vue.uiSchema = JSON.parse(result.data.uiSchema);
                    }
                    vue.formFooter = templateData.formFooter;
                    vue.formProps = templateData.formProps;
                    vue.innerVisible = true;
                }).catch(function (error) {
                    console.log(error);
                })
            },
        }
    });
</script>
<body>

</body>
</html>
